<template>
	<view>
		<view class='distribution-posters'>
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
				:duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px">
				<block v-for="(item,index) in spreadData" :key="index" class="img-list">
					<swiper-item class="aaa">
						<div class="box" ref="bill" :class="swiperIndex == index ? 'active' : 'quiet'">
							<view class="user-msg">
								<view class="user-code" style="text-align: center;">
									<image class="canvas" style="height:552x;width:334px" :src="posterImage[index]"></image>
									<canvas style="position: absolute;z-index: -999;height:552x;width:334px" class="canvas"  :canvas-id="'myCanvas'+ index"></canvas>
								</view>
							</view>
						</div>
						<!-- <image :src="item.wap_poster" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill' /> -->
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="qrimg">
			<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit"
				:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
				:onval="onval" :loadMake="loadMake" @result="qrR" />
		</view>
	</view>
</template>
<script>
	import {pathToBase64} from '@/js_sdk/mmmm-image-tools/index.js';
	// import jsBridge from 'ym-jsbridge'
	export default {
		
		data() {
			return {
				imgUrls: [],
				indicatorDots: false,
				posterImageStatus: true,
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				swiperIndex: 0,
				spreadList: [],
				userInfo: {},
				poster: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				spreadData: [], //新海报数据
				nickName: "清春美选",
				siteName: "",
				mpUrl: "",
				canvasImageUrl: '',
				posterImage: [],
				//二维码参数
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				src: '', // 二维码生成后的图片地址或base64
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#FFF', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				codeSrc: "",
				wd: 334,
				hg: 552,
				qrcode: "",
				imgs:'',
				posters:'',
				shareUrl:'',
				dataInfo:'',
				dataZhibo:'',
				start_date_time:'2020年0月0日 00:00:00'
			};
		},
		
		onLoad() {
			// this.codeSrc= "http://dong.zzcyx1688.net/api/v1/auth/getRefQrcode?url=/pages/index/index&token="+this.tui.getToken()+"&param=''"
			// this.codeSrc = this.tui.interfaceUrl()+"api.auth.center/qrcode?path=/pages/home/home&authorization="+this.tui.getToken()
			// this.shareUrl = '/pages/home/home?ref='+e.refCode
			// this.val= this.tui.faceUrl()+"#/pages/register/register?refCode="+e.refCode
			let that = this
			// this.nickName =e.name
			// that.get_haibao()
			that.getData()
		},
		onShow() {
			
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage() {
			return {
				title:'分享海报',
				path:'/pages/home/home?inviter_code='+uni.getStorageSync('inviter_code'),
			};
		},
		// #endif
		methods: {
			qrR(res){
				this.codeSrc = res
				this.spreadMsgs()
			},
			get_haibao(){
				let that = this
				that.tui.request("api.auth.center/placard", "GET", {}, false, false, true).then((res) => {
					that.spreadData = res.data.list
					// that.spreadMsgs()
				}).catch((res) => {})
			},
			getData(){
				let that = this
				that.tui.request("api.auth.center/get", "GET", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.dataInfo = res.data
						that.getZhibo()
					}
				}).catch((res) => {})
			},
			getZhibo(){
				let that = this
				that.tui.request("api.auth.live/liveRoomMtnWechat", "GET", {page:1}, false, false, true).then((res) => {
					that.dataZhibo = res.data.list
					if(that.dataZhibo.length==0){
						that.val= that.tui.faceUrl()+"#/pages/home/home?inviter_code="+that.dataInfo.inviter_code
					}else{
						that.val= that.tui.faceUrl()+"#/pages/home/home?inviter_code="+that.dataInfo.inviter_code+"&zhiboid="+that.dataZhibo[0].id
						that.start_date_time = that.dataZhibo[0].start_date_time
						that.nickName = that.dataZhibo[0].nickname
					}
					
				}).catch((res) => {})
			},
			//获取图片
			async spreadMsgs() {
				let that = this
				let imgs = [""]
				// 'http://myzhibo.wyc168.com/f2/71607ef382f091129ec745fb0261c7.jpg'
				that.posters = imgs
				that.spreadData=that.posters
				
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				// #ifdef H5
				// if (this.$wechat.isWeixin() && res.data.qrcode) {
				// 	this.qrcode = await this.imgToBase(res.data.qrcode)
				// }
				// #endif
				for (let i = 0; i < that.posters.length; i++) {
					let that = this
					let arr2, img , img1
					// #ifdef H5
					// img = await this.imgToBase(that.posters[i])
					// img1 = await this.imgToBase(that.dataInfo.headimg)
					arr2 = [this.codeSrc, imgs[i]]
					// #endif
					// #ifdef APP-PLUS
					img =await this.downloadFilestoreImage(that.posters[i].img)
					arr2 = [this.codeSrc, img]
					// #endif
					// #ifdef MP-WEIXIN
					img =await this.downloadFilestoreImage(that.posters[i].img)
					let qrcodeImg = await this.getImageInfo(this.codeSrc)
					
					arr2 = [qrcodeImg.path, img]
					// #endif
					that.$util.userPosterCanvas(arr2, that.dataInfo.nickname,that.start_date_time,that.nickName,i, this.wd, this.hg, (
						tempFilePath) => {
							that.$nextTick(()=>{
								that.$set(that.posterImage, i, tempFilePath);
								uni.setStorageSync('posterImage',that.posterImage)
							})
							uni.hideLoading()
						// #ifdef MP
						if(!that.posterImage.length){
							
						}
						// #endif
					});
				}
			},
			bindchange(e) {
				let spreadList = this.spreadList;
				this.swiperIndex = e.detail.current;
				// this.$set(this, 'poster', spreadList[e.detail.current].poster);
			},
			async imgToBase(url) {
				let that = this;
				return new Promise((resolve, reject) => {
					pathToBase64(url).then(e=>{
					    resolve(e)
					})
					return
					uni.request({
						url: "http://dscshop.zzcyx1688.cn/api/image_base64",
						data: {image:url},
						header: {
							// 'content-Type': 'application/json',
							'content-type':'application/x-www-form-urlencoded',
							'authorization': '',
						},
						method: 'POST', //'GET','POST'
						dataType: 'json',
						success: (res) => {
							console.log(res)
							resolve(res.data.data.image)
						},
						fail: (res) => {
							clearTimeout(tui.delayed)
							tui.delayed = null;
							tui.toast("网络不给力，请稍后再试~")
							reject(res)
						}
					})
				})
				
				return
				
				
			},
			savePosterPathMp(url) {
				let that = this;
				// jsBridge.saveImageToAlbum(url, function(succ) {
				// 	that.tui.toast(succ ? "保存成功" : "保存失败：转码失败或没有相册使用权限");
				// });
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: function(res) {
						console.log(res)
						that.tui.toast('保存成功');
					},
					fail: function(res) {
						that.tui.toast('保存失败');
					}
				});
			},
			shareApp(e){
				uni.saveImageToPhotosAlbum({
					filePath: e,
					success: function(res) {
						console.log(res.path)
						uni.shareWithSystem({
						  summary: '邀请好友',
						  imageUrl: res.path,
						  href: 'https://uniapp.dcloud.io',
						  success(res){
						    // 分享完成，请注意此时不一定是成功分享
							console.log("success:" + JSON.stringify(res));
						  },
						  fail(res){
						    // 分享失败
							console.log("fail:" + JSON.stringify(err));
						  }
						})
					},
					fail: function(res) {
						that.tui.toast('保存失败');
					}
				});
				
				// uni.share({
				// 	provider: "weixin",
				// 	scene: e,
				// 	type: 2,
				// 	imageUrl: this.spreadData[this.swiperIndex],
				// 	success: function (res) {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: function (err) {
				// 		console.log("fail:" + JSON.stringify(err));
				// 	}
				// });
			},
			setShareInfoStatus: function() {
				if (this.$wechat.isWeixin()) {
					if (this.isLogin) {
						getUserInfo().then(res => {
							let configAppMessage = {
								desc: '分销海报',
								title: res.data.nickname + '-分销海报',
								link: '/pages/index/index?spread=' + res.data.uid,
								imgUrl: this.spreadList[0]
							};
							this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
								configAppMessage)
						});
					} else {
						toLogin();
					}

				}
			},
			userSpreadBannerList: function() {
				let that = this;
				uni.showLoading({
					title: '获取中',
					mask: true,
				})
				spreadBanner().then(res => {
					uni.hideLoading();
					that.$set(that, 'spreadList', res.data);
					that.$set(that, 'poster', res.data[0].poster);
					// #ifdef H5
					that.setShareInfoStatus();
					// #endif
				}).catch(err => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss">
page {
		background-color: #a3a3a3 !important;
	}
	swiper{margin-top: 0;}
	.canvas {
		width: 100%;
		height: 100%
	}

	.box {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 18rpx;
		overflow: hidden;

		.user-msg {
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.user-code {
				width: 100%;
				 height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				justify-content: space-between;

				image {
					width: 100%;
				}
			}
		}
	}

	.img-list {
		margin-right: 40px;
	}

	.distribution-posters swiper {
		width: 100%;
		height: 1000rpx;
		position: relative;
		margin-top: 40rpx;
	}

	.distribution-posters .slide-image {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		border-radius: 15rpx;
	}

	.distribution-posters /deep/.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.distribution-posters /deep/ .quiet {
		transform: scale(0.8333333);
		transition: all 0.2s ease-in 0s;
	}

	.distribution-posters .keep {
		font-size: 30rpx;
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
	}

	.distribution-posters .preserve {
		color: #fff;
		text-align: center;
		margin-top: 38rpx;
	}

	.distribution-posters .preserve .line {
		width: 100rpx;
		height: 1px;
		background-color: #fff;
	}

	.distribution-posters .preserve .tip {
		margin: 0 30rpx;
	}
	.fenxiang{position: fixed;bottom: 0;left: 0;width: 100%;padding: 30rpx 0 0;background: #fff;z-index: 1111;
		.title{text-align: center;position: relative;
			text{position: relative;z-index: 222;background: #fff;display: inline-block;width:150rpx;}
		}
		.title:before{position: absolute;bottom: 20rpx;left: 0;content: '';z-index: 1;height: 1px;background: #eee;margin-left: 75rpx;width: 600rpx;}
		.share_list{margin: 30rpx 0;display: flex;
			.flex-1{flex: 1;}
		}
		.list{text-align: center;position: relative;
			.img{background: #f5f5f5;width: 80rpx;height: 80rpx;border-radius: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: center;margin-bottom: 10rpx;
				image{width: 40rpx;height: 40rpx;}
				.wenzi{transform: scale(.7);margin-top: -30rpx;}
			}
			button{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 111;background: transparent;border: none;}
			button:after{border: none;}
		}
	}
</style>
